<template>
	<view class="container">
		<view class="order-info-container">
			<view class="top-customer-card">
				<view class="list-item">
					<text class="list-item-title">VIP等级</text>
					<text class="list-item-content">{{ orderInfo.LevelName }}</text>
				</view>
				<view class="list-item" style="border-bottom: unset;">
					<text class="list-item-title">价格</text>
					<text class="list-item-content price-item">
						<text style="font-size: 24rpx;">¥</text>
						{{ orderInfo.Fee | moneyFormat(2) }}
					</text>
				</view>
			</view>

			<view class="fourth-remark-card">
				<view class="card-title">推荐人</view>
				<view class="card-remark-area"><input class="text-area" v-model="orderInfo.Remark" placeholder="请填写推荐人，可为空" maxlength="20"></input></view>
			</view>
		</view>

		<view class="bottom-view">
			<view class="bottom-right">
				<text style="font-size: 32rpx;margin-right: 10rpx;">待支付</text>
				<text style="color: #FE7904; font-size:40rpx;">
					<text style="font-size: 24rpx; margin-right: 6rpx;">¥</text>
					{{ orderInfo.Fee | moneyFormat(2) }}
				</text>
			</view>
			<view class="bottom-operation-container">
				<button class="confirm-btn-submit bottom-change-view" @click="$noMultipleClicks(submitOrder)" :loading="submitUploadStatus" :disabled="submitUploadStatus">
					立即支付
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { submitVipOrder } from '@/constant/vip.js';
import { successToShow } from '@/config/common.js';
export default {
	components: {},
	data() {
		return {
			orderInfo: {
				CustomerId: uni.getStorageSync('customerId'),
				StoreId: '',
				VipLevelId: '',
				Fee: '',
				GuestRoomTypeId: '',
				StoreId: '',
				Channel: 4,
				Remark: '',
				LevelName: ''
			},
			submitUploadStatus: false
		};
	},
	onShow() {},
	onLoad: function(option) {
		if (option.orderInfo) {
			this.orderInfo = JSON.parse(decodeURIComponent(option.orderInfo));
		}
	},
	methods: {
		async submitOrder() {
			this.submitUploadStatus = true;
			try {
				let result = await submitVipOrder(this.orderInfo);
				if (result) {
					successToShow('订单提交成功', res => {
						uni.reLaunch({
							url: '/pages/payorder/index?orderNo=' + result + '&orderType=60' + '&orderAmount=' + this.orderInfo.Fee
						});
					});
				}
			} catch {
				this.submitUploadStatus = false;
			}
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	overflow-y: auto;
	background-color: $main-page-color;
	height: 100vh;
}

.order-info-container {
	padding-right: 30rpx;
	padding-left: 30rpx;
	padding-bottom: 120rpx;
	font-size: $main-text-size-32;
	.top-customer-card {
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
	}

	.fourth-remark-card {
		padding: 40rpx 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
}

.card-title {
	color: $main-text-color-gray-33;
	font-size: $main-text-size-32;
	margin-bottom: 20rpx;
}

.card-remark-area {
	width: 100%;

	.text-area {
		border: 2rpx dashed $main-line-color-gray-DE;
		height: 60rpx;
		width: calc(100% - 20rpx);
		font-size: $main-text-size-28;
		padding: 10rpx;
	}
}

.price-item {
	color: $main-btn-orange-color;
}

.bottom-view {
	z-index: 999;
	height: 100rpx;
	width: 100%;
	background-color: #fff;
	color: $main-text-color-gray-33;
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
	justify-content: space-between;
	padding-bottom: 20rpx;
	.bottom-right {
		margin-left: 30rpx;
		color: $main-text-color-gray-33;
	}

	.bottom-operation-container {
		display: flex;
		margin-right: 30rpx;
		align-items: center;
		.confirm-btn-submit {
			padding: 0 50rpx;
			color: #ffffff;
			border-radius: 38rpx;
			font-size: $main-text-size-32;
			border-radius: 100rpx;
		}
	}
}

.list-item {
	min-height: 96rpx;
	border-bottom: 2rpx solid $main-line-color-gray-F5;
	display: flex;
	align-items: center;
	color: $main-text-color-gray-33;
	&-title {
		margin-left: 20rpx;
		margin-right: auto;
		width: 130rpx;
	}

	&-content {
		margin-right: 20rpx;
		text-align: right;
	}
}
</style>
